CSS Logische Eigenschappen: Websites Bouwen voor een Wereldwijd Publiek

In de huidige onderling verbonden wereld moeten websites zich richten op een wereldwijd publiek. Dit betekent dat ze diverse talen, schrijfmodi en culturele conventies moeten ondersteunen. Traditionele CSS-eigenschappen, gebaseerd op fysieke afmetingen (boven, rechts, beneden, links), kunnen problematisch worden bij het omgaan met lay-outs die in verschillende richtingen stromen. CSS Logische Eigenschappen bieden een oplossing door lay-out te definiëren op basis van de inhoudsstroom in plaats van de fysieke schermoriëntatie. Dit artikel duikt in de kracht van CSS Logische Eigenschappen en hoe ze u kunnen helpen bij het bouwen van echt internationale websites.

De Behoefte aan Logische Eigenschappen Begrijpen

Traditioneel nemen CSS-eigenschappen zoals margin-left en padding-right een links-naar-rechts (LTR) schrijfmodus aan. Veel talen, zoals Arabisch en Hebreeuws, gebruiken echter een rechts-naar-links (RTL) schrijfmodus. Bij het gebruik van traditionele CSS op een RTL-website moet u vaak de waarden van deze eigenschappen omdraaien, wat leidt tot complexe en foutgevoelige stylesheets. Bovendien kunnen sommige Oost-Aziatische talen verticaal worden geschreven, wat een extra complexiteitslaag introduceert. Logische eigenschappen pakken deze problemen aan door een manier te bieden om stijlen te definiëren op basis van de stroom van inhoud, in plaats van de fysieke positie op het scherm. Dit zorgt ervoor dat uw lay-outs zich automatisch aanpassen aan verschillende schrijfmodi en -richtingen.

Het Probleem met Fysieke Eigenschappen

Overweeg een eenvoudig navigatiemenu met items gescheiden door een marge. Met behulp van fysieke eigenschappen zou u het volgende kunnen schrijven:

            .nav-item {
 margin-right: 10px;
}

            

              
                Copy
              
            
          

Dit werkt perfect voor LTR-talen. Wanneer de website echter in een RTL-taal wordt weergegeven, verschijnt de marge aan de verkeerde kant van de navigatie-items. Om dit op te lossen, moet u nog een CSS-regel toevoegen, specifiek voor RTL-lay-outs:

            [dir="rtl"] .nav-item {
 margin-right: 0;
 margin-left: 10px;
}

            

              
                Copy
              
            
          

Deze aanpak is omslachtig en maakt uw CSS moeilijker te onderhouden. Logische eigenschappen bieden een veel schonere en beter onderhoudbare oplossing.

Introductie van CSS Logische Eigenschappen

CSS Logische Eigenschappen vervangen fysieke eigenschappen (boven, rechts, beneden, links) door logische equivalenten die relatief zijn aan de schrijfmodus en directionaliteit van de inhoud. Hier zijn enkele belangrijke logische eigenschappen en hun bijbehorende fysieke eigenschappen:

• margin-inline-start: Equivalent aan margin-left in LTR en margin-right in RTL.
• margin-inline-end: Equivalent aan margin-right in LTR en margin-left in RTL.
• padding-inline-start: Equivalent aan padding-left in LTR en padding-right in RTL.
• padding-inline-end: Equivalent aan padding-right in LTR en padding-left in RTL.
• border-inline-start: Equivalent aan border-left in LTR en border-right in RTL.
• border-inline-end: Equivalent aan border-right in LTR en border-left in RTL.
• inset-inline-start: Equivalent aan left in LTR en right in RTL.
• inset-inline-end: Equivalent aan right in LTR en left in RTL.
• margin-block-start: Equivalent aan margin-top in zowel LTR als RTL.
• margin-block-end: Equivalent aan margin-bottom in zowel LTR als RTL.
• padding-block-start: Equivalent aan padding-top in zowel LTR als RTL.
• padding-block-end: Equivalent aan padding-bottom in zowel LTR als RTL.
• border-block-start: Equivalent aan border-top in zowel LTR als RTL.
• border-block-end: Equivalent aan border-bottom in zowel LTR als RTL.
• inset-block-start: Equivalent aan top in zowel LTR als RTL.
• inset-block-end: Equivalent aan bottom in zowel LTR als RTL.
• inline-size: Vertegenwoordigt de horizontale dimensie. Equivalent aan width voor horizontale schrijfmodi.
• block-size: Vertegenwoordigt de verticale dimensie. Equivalent aan height voor horizontale schrijfmodi.

De termen "inline" en "block" verwijzen naar de richting van de tekststroom. De inline-richting is de richting waarin tekst binnen een regel stroomt (bijvoorbeeld van links naar rechts of van rechts naar links). De block-richting is de richting waarin tekstblokken worden gestapeld (bijvoorbeeld van boven naar beneden). Door deze logische eigenschappen te gebruiken, kunt u stijlen definiëren die onafhankelijk zijn van de schrijfmodus en richting.

Praktische Voorbeelden van het Gebruik van Logische Eigenschappen

Voorbeeld 1: Navigatiemenu

Laten we teruggaan naar het navigatiemenuvoorbeeld. In plaats van margin-right te gebruiken, kunnen we margin-inline-end gebruiken:

            .nav-item {
 margin-inline-end: 10px;
}

            

              
                Copy
              
            
          

Nu, ongeacht of de website in LTR of RTL staat, verschijnt de marge altijd aan de juiste kant van de navigatie-items. Geen behoefte aan afzonderlijke RTL-specifieke CSS-regels!

Voorbeeld 2: Kaartlay-out

Overweeg een kaartlay-out met een afbeelding aan de ene kant en tekst aan de andere kant. We kunnen logische eigenschappen gebruiken om de afbeelding correct te positioneren, ongeacht de schrijfmodus:

            .card {
 display: flex;
}

.card-image {
 flex: 0 0 150px;
}

.card-content {
 padding-inline-start: 20px; /* Ruimte tussen afbeelding en tekst aanpassen */
}

            

              
                Copy
              
            
          

In dit voorbeeld voegt padding-inline-start padding toe aan de linkerkant van de inhoud in LTR en aan de rechterkant in RTL, waardoor ervoor wordt gezorgd dat de tekst altijd visueel van de afbeelding wordt gescheiden.

Voorbeeld 3: Formulierlabels

Bij het ontwerpen van formulieren worden labels meestal links van invoervelden in LTR-lay-outs geplaatst. In RTL-lay-outs moeten de labels zich aan de rechterkant bevinden. Logische eigenschappen maken dit eenvoudig:

            label {
 display: inline-block;
 text-align: end;
 width: 100px;
 margin-inline-end: 10px; /* Ruimte tussen label en invoer */
}

            

              
                Copy
              
            
          

De eigenschap text-align: end lijnt de tekst rechts uit in LTR en links in RTL. De eigenschap margin-inline-end voegt ruimte toe tussen het label en het invoerveld aan de juiste kant.

Logische Eigenschappen Gebruiken met Schrijfmodi

CSS Schrijfmodi bepalen de richting waarin tekst stroomt, zowel horizontaal als verticaal. Logische eigenschappen zijn bijzonder nuttig bij het werken met verschillende schrijfmodi, zoals verticale tekst. De eigenschap writing-mode kan waarden aannemen zoals horizontal-tb (de standaard, horizontaal van boven naar beneden), vertical-rl (verticaal van rechts naar links) en vertical-lr (verticaal van links naar rechts).

Bij het gebruik van verticale schrijfmodi verandert de betekenis van logische eigenschappen. Zo verwijzen margin-inline-start en margin-inline-end nu respectievelijk naar de boven- en ondermarges.

Voorbeeld: Verticale Navigatie

Laten we een verticaal navigatiemenu maken:

            .vertical-nav {
 writing-mode: vertical-rl; /* of vertical-lr */
}

.vertical-nav-item {
 margin-block-end: 10px; /* Ruimte tussen items */
}

            

              
                Copy
              
            
          

In dit voorbeeld voegt margin-block-end ruimte toe tussen de navigatie-items in de verticale richting.

Directionaliteit: LTR en RTL

De eigenschap direction specificeert de richting van de tekststroom binnen een element. Het kan twee waarden hebben: ltr (links-naar-rechts) en rtl (rechts-naar-links). Deze eigenschap wordt vaak gebruikt in combinatie met het lang-attribuut op de <html>-tag of op specifieke elementen om de taal en directionaliteit van de inhoud aan te geven.

            <html lang="ar" dir="rtl">
 <body>
 <!-- Arabische inhoud hier -->
 </body>
</html>

            

              
                Copy
              
            
          

Wanneer het dir-attribuut is ingesteld op rtl, keert de browser automatisch de richting van inline-inhoud om en past de juiste stijlen toe op basis van de logische eigenschappen.

Voordelen van het Gebruik van Logische Eigenschappen

• Verbeterde Internationalisering (i18n) en Lokalisatie (l10n): Logische eigenschappen maken het gemakkelijker om websites te creëren die zich aanpassen aan verschillende talen, schrijfmodi en culturele conventies.
• Verminderde CSS-complexiteit: Door de behoefte aan afzonderlijke RTL-specifieke CSS-regels te elimineren, vereenvoudigen logische eigenschappen uw stylesheets en maken ze gemakkelijker te onderhouden.
• Verbeterde codeleesbaarheid: Logische eigenschapsnamen zijn beschrijvender en gemakkelijker te begrijpen dan fysieke eigenschapsnamen, wat leidt tot meer leesbare code.
• Betere prestaties: Verminderde CSS-complexiteit kan leiden tot verbeterde websiteprestaties, omdat de browser minder CSS hoeft te parseren en toe te passen.
• Toekomstbestendig: Naarmate webstandaarden evolueren, worden logische eigenschappen waarschijnlijk nog belangrijker voor het creëren van flexibele en aanpasbare websites.

Browsercompatibiliteit

De meeste moderne browsers ondersteunen CSS Logische Eigenschappen goed, waaronder Chrome, Firefox, Safari en Edge. Oudere browsers ondersteunen ze echter mogelijk niet volledig. Het is altijd een goed idee om compatibiliteitstabellen voor browsers (bijv. op caniuse.com) te controleren voordat u logische eigenschappen uitgebreid gebruikt. U kunt ook tools zoals Autoprefixer gebruiken om automatisch fallback-eigenschappen voor oudere browsers te genereren.

Best Practices voor het Gebruik van Logische Eigenschappen

• Begin met Logische Eigenschappen: Gebruik waar mogelijk logische eigenschappen in plaats van fysieke eigenschappen bij het definiëren van lay-outstijlen.
• Gebruik het dir-attribuut: Gebruik het dir-attribuut op de <html>-tag of op specifieke elementen om de directionaliteit van de inhoud aan te geven.
• Grondig testen: Test uw website in verschillende talen en schrijfmodi om ervoor te zorgen dat de lay-out correct wordt aangepast. Gebruik tools voor ontwikkelaars in de browser om de toegepaste stijlen te inspecteren en eventuele problemen te identificeren.
• Overweeg Fallbacks: Overweeg voor oudere browsers die logische eigenschappen niet ondersteunen, fallback-eigenschappen of tools zoals Autoprefixer te gebruiken.
• Consistentie handhaven: Gebruik logische eigenschappen consistent in uw hele stylesheet om verwarring te voorkomen en een consistent ontwerp te behouden.
• Leer de terminologie: Maak uzelf vertrouwd met de termen "inline" en "block" en hoe ze zich verhouden tot schrijfmodi en directionaliteit.
• Gebruik CSS-variabelen: U kunt CSS-variabelen gebruiken om waarden voor logische eigenschappen te definiëren en ze in uw hele stylesheet te hergebruiken. Dit helpt consistentie te behouden en maakt het gemakkelijker om stijlen bij te werken. Bijvoorbeeld:

            :root {
 --spacing-inline: 10px;
}

.element {
 margin-inline-start: var(--spacing-inline);
 padding-inline-end: var(--spacing-inline);
}

            

              
                Copy
              
            
          

Geavanceerde Technieken

calc() gebruiken met Logische Eigenschappen

U kunt de functie calc() gebruiken met logische eigenschappen om berekeningen uit te voeren op basis van de grootte van de inhoud of andere elementen. Bijvoorbeeld:

            .container {
 width: 100%;
}

.element {
 margin-inline-start: calc(50% - 100px); /* Het element centreren */
}

            

              
                Copy
              
            
          

Logische Eigenschappen combineren met Flexbox en Grid

Logische eigenschappen werken naadloos samen met CSS Flexbox- en Grid-lay-outs. U kunt ze gebruiken om de uitlijning en verdeling van items binnen een flex- of grid-container te regelen. Bijvoorbeeld:

            .flex-container {
 display: flex;
 justify-content: space-between;
 padding-inline-start: 20px;
 padding-inline-end: 20px;
}

            

              
                Copy
              
            
          

Logische Eigenschappen gebruiken met JavaScript

U kunt JavaScript gebruiken om de directionaliteit van de inhoud te detecteren en de juiste stijlen toe te passen op basis van de logische eigenschappen. Bijvoorbeeld:

            const isRtl = document.documentElement.getAttribute('dir') === 'rtl';

if (isRtl) {
 // RTL-specifieke stijlen toepassen
 document.body.classList.add('rtl');
}

            

              
                Copy
              
            
          

Vervolgens, in uw CSS:

            .element {
 margin-inline-start: 10px; /* Standaard LTR-stijl */
}

.rtl .element {
 margin-inline-start: 0; /* Overschrijven voor RTL */
 margin-inline-end: 10px;
}

            

              
                Copy
              
            
          

Hoewel deze aanpak mogelijk is, is het over het algemeen beter om zo veel mogelijk te vertrouwen op CSS Logische Eigenschappen en het dir-attribuut, omdat dit uw code schoner en beter onderhoudbaar houdt.

Toegankelijkheidsoverwegingen

Het gebruik van logische eigenschappen kan ook de toegankelijkheid van uw website verbeteren. Door ervoor te zorgen dat uw lay-out zich correct aanpast aan verschillende schrijfmodi, kunt u het voor gebruikers met een handicap gemakkelijker maken om door uw inhoud te navigeren en deze te begrijpen. Gebruikers die bijvoorbeeld schermlezers gebruiken, kunnen afhankelijk zijn van de juiste leesvolgorde van elementen, die kan worden beïnvloed door de schrijfrichting. Door logische eigenschappen te gebruiken, zorgt u ervoor dat de leesvolgorde consistent is, ongeacht de taal.

Conclusie

CSS Logische Eigenschappen zijn een krachtig hulpmiddel voor het bouwen van websites die zich richten op een wereldwijd publiek. Door logische eigenschappen in plaats van fysieke eigenschappen te gebruiken, kunt u lay-outs maken die zich automatisch aanpassen aan verschillende talen, schrijfmodi en culturele conventies. Dit leidt tot verbeterde internationalisering, verminderde CSS-complexiteit en verbeterde codeleesbaarheid. Omarm CSS Logische Eigenschappen en creëer echt globale en toegankelijke webervaringen voor iedereen.

Verder Lezen

• MDN Web Docs: CSS Logische Eigenschappen
• CSS Logische Eigenschappen en Waarden Niveau 1
• Can I Use: CSS Logische Eigenschappen